$header-inner-height: (
    default: 24px,
    sm: 32px,
    md: 40px,
    lg: 45px
);
$header-logo-width: (
    default: 105px,
    md: 132px,
    lg: 148px
);
$header-padding-top: (
    default: 0,
    md: 60px,
    lg: 70px
);
$header-padding-bottom: (
    default: 0,
    md: 27px,
    lg: 42px
);
$header-font-size: (
    default: 18px,
    lg: 20px
);
$header-nav-font-size: (
    default: 18px,
    lg: 24px
);

@include base {
    &-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        display: flex;
        align-items: center;
        @include responsive($header-height, height);
        @include responsive($header-padding-top, padding-top);
        @include responsive($header-padding-bottom, padding-bottom);
        
        &__logo {
            box-sizing: border-box;
            padding-left: 105px;
            padding-top: 1.3%;
            background: url('~assets/images/logo.png') no-repeat left center;
            background-size: auto 100%;
            color: #444;
            float: left;
            @include responsive($header-logo-width, padding-left);
            @include responsive($header-inner-height, height);
            
            span {
                display: none;
                padding-left: 10px;
                @include responsive($header-font-size, font-size);
            }
        }
        
        &__nav {
            display: block;
            position: absolute;
            @include responsive($header-height, top);
            left: 0;
            right: 0;
            background-color: #fff;
            border-top: 1px solid #e2e2e2;
            z-index: 1000;
            height: 0;
            overflow: hidden;
            box-shadow: 0 1px 15px rgba(0, 0, 0, .05);
            @include transition(height .2s ease);
            
            &.show {
                height: 240px;
            }
            
            a {
                color: #333;
                text-decoration: none;
                vertical-align: middle;
                display: block;
                height: 60px;
                line-height: 60px;
                text-align: center;
                @include transition(color 400ms ease);
                @include responsive($header-nav-font-size, font-size);
                
                &:hover {
                    color: #0080cc;
                }
            }
                
            i {
                width: 100%;
                height: 1px;
                display: block;
                background-color: #e2e2e2;
            }
            
            &-switch {
                position: absolute;
                width: 25px;
                height: 18px;
                right: 3%;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;
                cursor: pointer;
                i {
                    width: 100%;
                    display: block;
                    height: 2px;
                    background-color: #0b84f9;
                    transition: width .2s ease;
                }
                &::after, &::before {
                    display: block;
                    content: '\20';
                    position: absolute;
                    width: 100%;
                    height: 2px;
                    top: 50%;
                    margin-top: -1px;
                    background-color: #0b84f9;
                    transition: transform .2s ease;
                }
                &.show {
                    i {
                        width: 0;
                    }
                    &::after {
                        transform: rotate(45deg);
                    }
                    &::before {
                        transform: rotate(-45deg);
                    }
                }
            }
        }
        
        &__trans {
            background-color: transparent;
            
            .mw-header {
                &__logo {
                    background-image: url('~assets/images/logo-white.png');
                    color: #fff;
                }
                
                &__nav {
                    border-top: 0;
                    
                    &-switch {
                        i, &::after, &::before {
                            background-color: #fff;
                        }
                    }
                }
            }
        }
    }
}

@include adaptive(md) {
    @include base {
        &-header {
            display: block;
            
            &__nav {
                float: right;
                display: block;
                position: static;
                height: auto;
                overflow: visible;
                border-top: 0;
                box-shadow: none;
                @include responsive($header-inner-height, line-height);
                &.show {
                    height: auto;
                }
                &-switch {
                    display: none;
                }
                a {
                    display: inline-block;
                    height: auto;
                    line-height: 1;
                }
                i {
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    margin: 0 30px;
                }
            }
            
            &__logo {
                span {
                    display: inline;
                }
            }
        
            &__trans {
                .mw-header {
                    &__nav {
                        background-color: transparent;
                        
                        a {
                            color: #fff;
                        }
                        
                        i {
                            background-color: rgba(255, 255, 255, .5);
                        }
                    }
                }
            }
        }
    }
}